<template>
	<view>
		<u-navbar leftIconColor="#fff" title="分销中心" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="head" :style="{marginTop: top + 'px;background: #4B7BFB;padding-bottom: 200rpx'}">
			<view class="rel" style="padding: 20rpx;">
				<image class="dis_in" mode="aspectFill" :src="userinfo.img"></image>
				<view class="dis_in">
					<view class="fon_28 color_f">{{ userinfo.name }}</view>
					<view class="fon_28 color_f">推荐人：{{ yqr }}</view>
				</view>
				<navigator class="ab ud fon_24 color_f mine" openType="reLaunch" url="../my2/index">
					<text class="ab" style="background: rgba(255, 255, 255, .2);"></text>
					<text class="ab">个人中心</text>
				</navigator>
			</view>

		</view>
		<view style="
		    width: 95%;
		    margin: 20rpx auto;
		    border-radius: 40rpx;
		    background: #fff;
		    box-shadow: 0 0 10rpx #eee;
		    padding: 40rpx;
				position: relative;
				top: -100px;
		  ">
			<view style="
		      width: 100%;
		      display: flex;
		      justify-content: space-between;
		      align-items: flex-start;
		    ">
				<view class="fon_24" style="color: #333">
					<view>可提现佣金(元)</view>
					<text style="font-size: 40rpx; color: #D75E53; font-weight: 600">{{
		        yjdata.ktxyj
		      }}</text>
				</view>
				<view class="fon_24 color_f rel" style="display: flex;align-items: center;">
					<text style="color: #A0A1A6;">提现记录</text>
					<image src="../../../static/ymq_canyino2o/arrow-right.png" mode="" style="width: 12rpx;height: 20rpx;">
					</image>
				</view>
			</view>

			<view class="ba_ff put_forward" style="
		      display: flex;
		      justify-content: space-between;
		      margin-top: 20rpx;
		    ">
				<view class="dis_in fon_24" style="display: flex; flex-direction: column;  font-size: 24rpx">
					<view style="color: #424344;">累计佣金</view>
					<view style="color: #000000;font-weight: bold; margin-top: 10rpx;font-size: 30rpx">{{
		        yjdata.ljyj
		      }}</view>
				</view>
				<view class="dis_in fon_24" style="display: flex; flex-direction: column; font-size: 24rpx">
					<view style="color: #424344;">已申请佣金</view>
					<view style="color: #000000;font-weight: bold;font-weight: bold; margin-top: 10rpx;font-size: 30rpx">{{
		        yjdata.ddkyj
		      }}</view>
				</view>
				<view class="dis_in fon_24" style="display: flex; flex-direction: column;  font-size: 24rpx">
					<view style="color: #424344;">已提现佣金</view>
					<view style="color: #000000;font-weight: bold; margin-top: 10rpx;font-size: 30rpx">{{
		        yjdata.ytxyj
		      }}</view>
				</view>
			</view>

			<view class="fon_24 color_f rel" style="
			    color: #fff;
			    width: 90%;
			    border-radius: 20rpx;
			    text-align: center;
			    padding: 20rpx 0;
					background: #4B7BFB;
					box-shadow: 0rpx 3rpx 16rpx 0rpx rgba(0,0,0,0.35);
					border-radius: 34rpx;
					margin: 40rpx auto 20rpx;
			  ">
				<text @tap="tixian">立即提现</text>
			</view>
		</view>
		<!-- <view class="pa ba_ff put_forward">
      <view class="dis_in fon_24">
        <view class="fon_36">{{ yjdata.ljyj }}</view>
        <view class="color_9">累计佣金(元)</view>
      </view>
      <view class="dis_in fon_24">
        <view class="fon_36">{{ yjdata.ddkyj }}</view>
        <view class="color_9">已申请佣金(元)</view>
      </view>
      <view class="dis_in fon_24">
        <view class="fon_36">{{ yjdata.ytxyj }}</view>
        <view class="color_9">已提现佣金(元)</view>
      </view>
    </view> -->
		<view style="width: 95%; display: flex; flex-wrap: wrap;margin: 20rpx auto;background: #FFFFFF;
box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(198,194,194,0.35);position: relative;top: -100px;padding: 20rpx 0;
border-radius: 10rpx;">
			<view @tap="distribution" class="ba_ff list bor_bottom rel" style="
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 25%;
        ">
				<image class="dis_in" mode="aspectFit" src="/static/ymq_canyino2o/wdyj.png"></image>
				<text class="dis_in fon_30">我的佣金</text>
				<!-- <image
          class="ab ud"
          mode="aspectFill"
          src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"
        ></image> -->
			</view>
			<view @tap="downline" class="ba_ff list rel" style="
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 25%;
        ">
				<image class="dis_in" mode="aspectFit" src="/static/ymq_canyino2o/wdhb.png"></image>
				<text class="dis_in fon_30">{{ fxset.xx_name }}</text>
				<!-- <image
          class="ab ud"
          mode="aspectFill"
          src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"
        ></image> -->
			</view>
			<view @tap="ranking" class="ba_ff list rel" style="
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 25%;
        ">
				<image class="dis_in" mode="aspectFit" src="/static/ymq_canyino2o/fxsm.png"></image>
				<text class="dis_in fon_30">分销说明</text>
				<!-- <image
          class="ab ud"
          mode="aspectFill"
          src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"
        ></image> -->
			</view>
			<view @tap="mdmfx" class="ba_ff list rel" style="
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 25%;
        ">
				<image class="dis_in" mode="aspectFit" src="/static/ymq_canyino2o/fxewm.png"></image>
				<text class="dis_in fon_30">分销二维码</text>
				<!-- <image
          class="ab ud"
          mode="aspectFill"
          src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"
        ></image> -->
			</view>
		</view>
		<view @tap="yczz" class="zhezhao" v-if="!fwxy"></view>
		<view class="fxmxy" v-if="!fwxy">
			<view class="fxmxyhd" :style="'background:' + color">请朋友扫码来下单获取佣金</view>
			<view @tap="previewimg" class="fxmxybd">
				<image :src="code"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import cardlist from '@/ymq_canyino2o/dist/cardlist/index'
	import gettel from '@/ymq_canyino2o/dist/gettel/index'
	var app = getApp()
	export default {
		components: {
			cardlist,
			gettel
		},
		data() {
			return {
				top: 0,
				color: '#459cf9',
				fwxy: true,

				userinfo: {
					img: '',
					name: ''
				},

				yqr: '',
				sxdata: '',
				code: '',

				fxset: {
					xx_name: ''
				},

				yjdata: {
					ktxyj: '',
					ljyj: '',
					ddkyj: '',
					ytxyj: ''
				}
			}
		},
		onLoad: function(t) {
			app.globalData.setNavigationBarColor(this)
			var that = this
			var e = uni.getStorageSync('users').id
			this.setData({
				userinfo: uni.getStorageSync('users')
			})
			app.globalData.util.request({
				url: 'entry/wxapp/MySx',
				cachetime: '0',
				data: {
					user_id: e
				},
				success: function(t) {
					console.log(t.data)
					if (t.data) {
						that.setData({
							yqr: t.data.name,
							sxdata: t.data
						})
					} else {
						that.setData({
							yqr: '总店',
							sxdata: t.data
						})
					}
				}
			})
			let platform = "";
			// #ifdef H5
			//判断是否是微信公众号环境,通过浏览器ua
			if (platform.indexOf("micromessenger") != -1) {
				platform = "wx_gzh";
			} else {
				platform = "h5";
			}
			// #endif

			// #ifdef MP-WEIXIN
			platform = "wx_mini";
			// #endif

			// #ifdef MP-TOUTIAO
			platform = "toutiao_mini";
			// #endif


			app.globalData.util.request({
				url: 'entry/wxapp/MyCode',
				cachetime: '0',
				data: {
					user_id: e,
					platform: platform
				},
				success: function(t) {
					console.log(t.data)
					that.setData({
						code: t.data
					})
				}
			})
			app.globalData.util.request({
				url: 'entry/wxapp/CheckRetail',
				cachetime: '0',
				success: function(t) {
					console.log(t)
					that.setData({
						fxset: t.data
					})
				}
			})
		},
		onReady: function() {},
		onShow: function() {
			var that = this
			var t = uni.getStorageSync('users').id
			app.globalData.util.request({
				url: 'entry/wxapp/MyCommission',
				cachetime: '0',
				data: {
					user_id: t
				},
				success: function(t) {
					console.log(t.data)
					that.setData({
						yjdata: t.data
					})
				}
			})

			this.top = uni.getSystemInfoSync().statusBarHeight + 44
		},
		onHide: function() {},
		onUnload: function() {},
		onPullDownRefresh: function() {},
		onReachBottom: function() {},
		onShareAppMessage: function() {},
		methods: {
			rightClick() {
				uni.navigateBack(1)
			},
			previewimg: function() {
				uni.previewImage({
					urls: [this.code]
				})
			},

			mdmfx: function() {
				this.setData({
					fwxy: false
				})
			},

			yczz: function() {
				this.setData({
					fwxy: true
				})
			},

			bctp: function() {
				console.log(this.code)
				var that = this
				uni.downloadFile({
					url: that.code,
					success: function(t) {
						console.log(t)
						uni.showLoading({
							title: '正在保存图片',
							mask: true
						})
						uni.saveImageToPhotosAlbum({
							filePath: t.tempFilePath,
							success: function() {
								that.setData({
									fwxy: true
								})
								uni.showModal({
									title: '提示',
									content: '商家海报保存成功',
									showCancel: false
								})
							}
						})
					},
					complete: function(t) {
						console.log(t)
						uni.hideLoading()
					}
				})
			},

			distribution: function(t) {
				uni.navigateTo({
					url: 'distribution'
				})
			},

			downline: function(t) {
				uni.navigateTo({
					url: 'downline'
				})
			},

			ranking: function(t) {
				uni.navigateTo({
					url: 'ranking'
				})
			},

			invation: function(t) {
				uni.navigateTo({
					url: 'index'
				})
			},

			tixian: function(t) {
				uni.navigateTo({
					url: 'tixian'
				})
			}
		}
	}
</script>
<style>
	@import './core.css';
</style>
<style lang="scss" scoped>
	::v-deep .u-status-bar,
	::v-deep .u-navbar__content {
		background-color: #4B7BFB !important;

		.u-navbar__content__title {
			color: #fff !important;
		}
	}
</style>